<template>
    <el-dialog :close-on-click-modal = "false"  title="办件查询" :visible.sync="dialogVisible" height="440px" width="600px">
        <ul class="search-ul">
            <li v-for="(item,index) in list" :key="index" @click="onClick(item,index)" v-bind:class="{'active':index === activeIndex}" class="search-list">
                <div class="phone">
                    <span class="target">⊙</span>
                    <span>{{item.handlePersonTelNo || "无"}}</span>
                </div>
                <div class="flex1">{{item.handleInfo || "无"}}</div>
                <div class="date">{{getDate(item.createTime)}}</div>
            </li>
            <div v-if = "!list.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
        <div class="pager">
            <el-pagination 
                background 
                @current-change="handleCurrentChange" 
                :current-page="currentPageNum" 
                :page-size="7" 
                prev-text="上一页" 
                next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
        </div>
        <div v-if="activeIndex>-1" class="detail">
            <div class="title-row">办件查询</div>
            <ul class="detail-ul">
                <li v-for="(item,index) in currentList" :key="index" class="detail-li">
                    <div>
                        <span class="accept-text">{{item.type}}</span>
                        <span>{{getDate(item.createTime)}}</span>
                    </div>
                    <p class="sub-des-text">{{item.opinion}}</p>
                    <div class="outer-circle">
                        <div class="inner-circle"></div>
                    </div>
                </li>
            </ul>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import { searchWorkbenchList } from "../../config/api";
import { getTimeStr } from "../../utils";

export default {
    props: ["list","total"],
    data() {
        return {
            dialogVisible: false,
            activeIndex: -1,
            currentPageNum:1,
            currentList: []
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe(
            "showSearchDialog",
            (type, args) => {
                this.dialogVisible = true;
                // this.getList(args);
            }
        );
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        onClick(item, index) {
            this.activeIndex = index;
            this.currentList = item.handleFlow || [];
        },
        /**
         * 转换时间格式
         */
        getDate(tamp) {
            return getTimeStr(tamp, "yyyy-MM-dd");
        },
        //翻页
        handleCurrentChange(e){
            this.activeIndex = -1;
            this.currentPageNum = e;
            this.$emit("onPager",e);
        }
    }
};
</script>

<style lang = "scss" scoped>
.search-ul {
    height: 356px;
    overflow: auto;
}
.search-list {
    background: #eee;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    color: #000;
    cursor: pointer;
    .target {
        margin-right: 10px;
    }
    &:before {
        content: "";
        display: block;
        position: absolute;
        display: none;
        left: -28px;
        height: 0;
        width: 0;
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-left: 28px solid #fff;
        /* box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48); */
        z-index: 9;
    }
    /* &::before {
        position: absolute;
        content: "";
        display: block;
        left: -55px;
        height: 28px;
        width: 28px;
        background-color: transparent;
        box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48);
        transform: rotate(45deg);
    } */
    &.active {
        background: #1a36a9;
        color: #fff;
        &:before {
            display: block;
        }
    }
    .phone {
        flex: 0.7;
    }
}
.detail {
    position: absolute;
    left: -325px;
    background: #fff;
    top: 15px;
    width: 310px;
    height: 415px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    .title-row {
        height: 34px;
        line-height: 34px;
        background: #1a36a9;
        color: #fff;
        padding-left: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    &-ul {
        padding-left: 35px;
        overflow: auto;
        flex: 1;
    }
    &-li {
        padding: 20px 0 20px 20px;
        border-bottom: 1px solid #dcdcdc;
        border-left: 1px solid #1a36a9;
        position: relative;
        &:last-child {
            border-bottom: none;
        }
    }
    .outer-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: -10px;
        top: 20px;
        height: 16px;
        width: 16px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid #1a36a9;
    }
    .inner-circle {
        height: 12px;
        width: 12px;
        background: #1a36a9;
        border-radius: 12px;
    }
    .accept-text {
        color: #1a36a9;
        font-size: 18px;
        margin-right: 10px;
        & + span {
            font-size: 14px;
            color: #888;
        }
    }
    .sub-des-text {
        font-size: 16px;
        margin-top: 10px;
    }
}
</style>